<template>
  <div class="cake">
      <el-tabs type="border-card">
  <el-tab-pane>
    <span slot="label"> 按价格分类</span>
    <div>
     <el-link :underline="false" @click="quanbu(index)">全部</el-link>
      <el-link :underline="false" @click="gao(index)" >从高到低</el-link>
      <el-link :underline="false" @click="di(index)">从低到高</el-link> 
</div>
    
  </el-tab-pane>
  <el-tab-pane label="按材料分类">
    <div>
     <el-link :underline="false" @click="quanbu(index)" >全部</el-link>
      <el-link :underline="false" v-for="(name,index) in emp5" :key="index" @click="cailiao(index)">{{name.cailiao}}</el-link>
</div>
    
  </el-tab-pane>
  <el-tab-pane label="按用途分类">
     <div>
     <el-link :underline="false" @click="quanbu(index)">全部</el-link>
      <el-link :underline="false" v-for="(name,index) in emp3" :key="index" @click="pinzhong(index)">{{name.pinzhong}}</el-link>

</div>
    
  </el-tab-pane>
</el-tabs>
    <el-row :gutter="20">
  <el-col :xs="12" :sm="8" :md="8" :lg="6" :xl="6" v-for="(product,key) in products" :key="key" >
    <a href @click.prevent="buy(product.productId)">
    <el-card :body-style="{ padding: '0px' }" shadow="never">
       <div class="img"><img :src="getPic(product.productPic)" class="image" ></div>
      <div style="padding: 0px;">
        <div class="xianshishi">
          <h3>{{product.productName}}</h3>
          <div  class="title2">￥{{product.price}}</div>
        </div>

      </div>
    </el-card></a>
  </el-col>
   </el-row>
 
  </div>
</template>

<script>

export default { 

  data(){
    return{
      products:[],
       emp5:[
        {cailiao:'奶油'},
        {cailiao:'鲜花'},
        {cailiao:'芝士'},
        {cailiao:'冰淇淋'},
        {cailiao:'鲜果'},
      ],
       emp3:[
        {pinzhong:'甜品'},
        {pinzhong:'面包'},
        {pinzhong:'蛋糕'},
        {pinzhong:'鲜花糕点'},
      ],
    };
  }, 
  methods: {
    buy(index){
      this.$store.state.productId=index;
      this.$router.push("/index/OrtherDetail")
    },
    getPic(pic){
      let path = 'http://localhost:3000/images/' + pic
      console.log(path)
      
      return path
    },
    cailiao(index){
        console.log(this.emp5[index].cailiao)
        var e=this.emp5[index].cailiao
        this.$axios.get('http://localhost:3000/product/getProductCailiao',{params:{cailiao:e}})
        .then(res=>{
           console.log(res.data.data)
             this.products=res.data.data
        })
        
        .catch(err=>{
          console.log(err)
        })
      },
       pinzhong(index){
        console.log(this.emp3[index].pinzhong)
        var c=this.emp3[index].pinzhong
        this.$axios.get('http://localhost:3000/product/getProductPinzhong',{params:{pinzhong:c}})
        .then(res=>{
           console.log(res.data.data)
             this.products=res.data.data
        })
        
        .catch(err=>{
          console.log(err)
        })
      },
      gao(index){
        this.$axios.get('http://localhost:3000/product/getProductGao/201902')
                .then(res=>{
           console.log(res.data.data)
             this.products=res.data.data
        })
        
        .catch(err=>{
          console.log(err)
        })
      },
        di(index){
        this.$axios.get('http://localhost:3000/product/getProductDi/201902')
                .then(res=>{
           console.log(res.data.data)
             this.products=res.data.data
        })
        
        .catch(err=>{
          console.log(err)
        })
      },
      quanbu(index){
        this.$axios
        .get('http://localhost:3000/product/201902')
        .then(res =>{
          console.log(res.data.data)
          this.products=res.data.data
        
        })
        .catch(err =>{
          console.log(err)
        })
      },
  },
 created(){
    this.$store.state.navIndex="3"
   this.$axios
        .get('http://localhost:3000/product/201902')
        .then(res =>{
          console.log(res.data.data)
          this.products=res.data.data
        
        })
        .catch(err =>{
          console.log(err)
        })
      },

}

</script>
<style>
.cake{
  font-family: "楷体";
  background-image: url("../assets/body_bg.png")
  }
.cake .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover{
  color: #ffd04b;
}
.cake .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
   color: #ffd04b;

}
.cake .el-col[data-v-53dbe795] {
  margin-bottom:20px; }
.cake .el-button--text {
   color: #ffd04b;
 }
.cake .el-col[data-v-53dbe795] {
  margin-bottom:20px; }
  .cake .el-card__body{
    width: 227px;
    overflow: hidden;
  }
  .cake  .el-card{
    width: 227px;
    min-height: auto;
    padding: 0;
    margin: 14px;
    float: left;
    text-align: center;
    position: relative;
    border: 1px solid #ebebeb;
    line-height: 18px !important;
    box-sizing: border-box;
  }
</style>
<style scoped>
.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  .image {
    width: 227px;
    height: 227px;
    display: block;
    margin: 0 auto;

  }
  

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
  .cake{
    height: 100%;
    width: 70%;
    margin: 0 auto;
  }
 .el-link.el-link--default:hover{
   color: #ffd04b;
 }
 .el-link.el-link--default {
   color: #909399;
   width: 100px;
    padding: 0px;
 }
 h3{
   padding: 4px 0 3px;
    margin: 0;
    font-size: 15px;
    display: block;
    font-weight: normal;
    color: #363636;
 }
 .xianshishi{
   height: 40px;
 }
 .title2{
  font-size: 14px;
  letter-spacing: 3px;
  color: #363636;
  margin: 0;
  text-align: center;
  width: 100%;
 }
 .el-card{
   overflow: hidden;
 }
 .el-card:hover .xianshishi{
   background-color: #E1758F;
 }
 .el-card:hover .image{
transform: scale(1.03,1.03);
transition: 1s;
 }
.el-card:hover h3,.el-card:hover .title2{
  color:#f7f7f7;
}
 .img{
   width: 227px;
   height: 227px;
   overflow: hidden;
 }
    @media screen and (max-width:600px){
       .cake{
         width: 100%;
       }
    }
</style>

